  <template>
  <el-table :data="tableData"
            style="width: 100%"><el-table-column type="selection"
                     width="55"></el-table-column><el-table-column prop="date"
                     label="日期"
                     width="180"></el-table-column><el-table-column prop="name"
                     label="姓名"
                     width="180"><template slot-scope="scope">
        <div draggable
             @dragstart="handleDragStart($event, scope.row)"
             @dragover="handleDragOver($event)"
             @drop="handleDrop($event, scope.row)">{{ scope.row.name }}
        </div>
      </template></el-table-column><el-table-column prop="address"
                     label="地址"></el-table-column></el-table>
</template>

  <script>
export default {
  data () {
    return {
      tableData: [{
        date: '2016-05-02',
        name: '王小虎1',
        address: '上海市普陀区金沙江路 1518 弄'
      }, {
        date: '2016-05-04',
        name: '王小虎2',
        address: '上海市普陀区金沙江路 1517 弄'
      }, {
        date: '2016-05-01',
        name: '王小虎3',
        address: '上海市普陀区金沙江路 1519 弄'
      }, {
        date: '2016-05-03',
        name: '王小虎4',
        address: '上海市普陀区金沙江路 1516 弄'
      }]
    }
  },
  methods: {
    handleDragStart (event, row) {
      this.draggingRowIndex = this.tableData.indexOf(row)
    },
    handleDragOver (event) {
      event.preventDefault()
    },
    handleDrop (event, row) {
      const droppingRowIndex = this.tableData.indexOf(row)
      const draggingRow = this.tableData[this.draggingRowIndex]
      this.tableData.splice(this.draggingRowIndex, 1)
      this.tableData.splice(droppingRowIndex, 0, draggingRow)

    }
  }
}
  </script>